<template>
  <div>
    <el-button type="primary" @click="clearSearchForm">清空搜索数据</el-button>
    <avue-crud :data="data" :option="tableOption" :search.sync="search" :page.sync="page" ref="crud"
               @search-change="searchChange"
               @selection-change="selectionChange"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-reset="resetChange"
               @on-load="onLoad"
               >
      <template slot="entryNameLabel">
         <span>自定义的项目名称</span>
      </template>
      <template slot="nameHeader" slot-scope="scope">
         <el-button class="mg-l5" type="primary" size="mini" icon="el-icon-plus" circle @click="handleAddCell"></el-button>
      </template>
      <template #age="{row}">
        <el-tag>{{row.age}}****</el-tag>
      </template>
      <template slot="nameSearch" slot-scope="{row,size}">
        <el-row>
          <el-row span="6">
            <el-tag>标题</el-tag>
            <el-input placeholder="自定义输入框" :size="size" style="width:200px" v-model="search.slot"></el-input>
          </el-row>
        </el-row>
      </template>
    </avue-crud>

    <el-button type="primary" @click="submit">保存</el-button>


    <avue-tree   :option="option" :data="data">
    </avue-tree>


  </div>
</template>

<script>
import {validatenull} from "@/utils/validate"
export default{
  name:"avue-index",
  data() {
    return {
      search:{
        name:'small'
      },
      entryName:'',
      page:{
        pageSize: 20,
        total:1000,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      tableOption: {

        header:true,
        addBtn:true,
        columnSort:true,
        selection:true,
        tip: false,
        delBtn:false,
        searchBtnIcon:'el-icon-user',
        cellBtn:true,
        selectable(row, index) {
          console.log("index:",index)
          if (index == 0){
            return false ;
          }
          return  true
          console.log("***********row:",row)
          // if (row && row.parentId == 0) {
          //   return false;
          // }
          // return true;
        },
        column:[{
          label:'姓名',
          prop:'name',
          slot:true ,
          search:true,
          cell:true,
          headerslot:true,
        },{
          label:'年龄',
          prop:'age',
          cell:true,
        },
          {
            label: "项目名称",
            prop: "entryName",
            align:'center',
            search: true,
            labelslot:true,
            searchSpan: 5,
            type: "select",
            // hide:true,
            dicData:[
              { label:'未提交',value:0 },
              { label:'审批中',value:1 },
              { label:'驳回',value:2 },
              { label:'已通过',value:3 },
            ],
            rules: [
              {
                required: true,
                message: "请输入流程状态",
                trigger: "blur",
              },
            ],
            change: ({value, column}) => {
              const text = this.getDicSelectText(column.prop, value);
              console.log('text:',text)
              this.entryName = text;
            },
          },
            {
                label: '省份',
                prop:'province',
                type:'select',
                search:true,
                cell:true,
                props: {
                    label: 'name',
                    value: 'code'
                },
                dicUrl:`https://cli.avuejs.com/api/area/getProvince`,
                // dicFormatter:(res)=>{
                //   console.log("省份res:",res) ;
                //   this.provins = res ;
                //   return [{name:'吉林',code:'11111'}]
                // },


            }]
      },
      data:[{name:'张三',age:"20",  $cellEdit:true},{name:'李四',age:'26'}],
      option: {
        column: [
          {
              label: '下拉框',
              prop: 'select2',
              type: 'select',
              props: {
                  label: 'name',
                  value: 'code'
              },
              dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
          },
          {
            label:'输入框',
            prop:'input',
            type:'input',
            value:'默认值11',
            clearable:false
          },
          {
            label:'输入框',
            prop:'input1',
            value:'默认值'
          }
        ]
      },
        //---tree相关---
      treeOption:{
          defaultExpandAll:true,
          multiple:true,
          menu:true,
          formOption:{
              labelWidth:100,
              column:[{
                  label:'自定义项',
                  prop:'label'
              },{
                  label:'测试',
                  prop:'test'
              }],
          }
      },
      form:{},
      treeData:[
          {
              value:0,
              label:'一级部门',
              children:[
                  {
                      value:1,
                      label:'一级部门1',
                  },{
                      value:2,
                      label:'一级部门2',
                  }
              ]
          },{
              value:3,
              label:'二级部门',
              children:[
                  {
                      value:4,
                      label:'二级部门1',
                  },{
                      value:5,
                      label:'二级部门2',
                  }
              ]
          }
      ],
      formData:{},
    }
  },
  methods:{
    searchChange(params, done) {
      console.log("params:",params)
      params.entryName = this.entryName ;
      this.query = params;
      //console.log("params:",params)
      // this.page.currentPage = 1;
      // this.onLoad(this.page, params);

      done();
    },
    selectionChange(list) {
      //this.selectionList = list;
      //this.selectionList = list ;
     // this.$refs.crud.clearSelection() ;


    },
    toggleRowHandler(){
      this.$refs.crud.toggleRowSelection({name:'李四',age:'26'})
    },
    rowSave(form,done,loading){
      console.log("rowSave")
      //done() ;
      //done(form) ;
      loading();
    },
    rowUpdate(form,index,done,loading){
      this.$message.success('关闭按钮等待');
      setTimeout(function(){
        loading();
      },1000)
      done(form) ;
    },
    getDicSelectText(type, value) {
      if (validatenull(value)) {
        return "";
      }

      const bl = this.$refs.crud.DIC.hasOwnProperty(type);
      if (bl) {
        const obj = this.$refs.crud.DIC[type].find(item => item.value == value);
        if (!validatenull(obj)) {
          return obj.label;
        }
      }
      return "";
    },
    handleAddCell(){
        this.$refs.crud.rowCellAdd({
            name: '',
        });
    },
    submitTest(){
      console.log("this.formData:",this.formData)
    },
    // handleRowClick (row, event, column) {
    //   this.$refs.crud.rowCell(row, row.$index);
    // },
    submit(){
      console.log("this.data:",this.data)
    },
    clearSearchForm(){

      console.log("this.$refs.crud:",this.$refs.crud)
      this.$refs.crud.searchReset() ;
      //this.search = {} ;
    },
    resetChange(item){
      console.log( "this.$refs.crud:", this.$refs.crud)

      // console.log("item:",item)
      // this.$set(item,'name','')
      // this.$message.success('清空回调')
    },
    onLoad(val){
      console.log("onLoad val:",val)
    }
  }
}
</script>